<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Probably the most complete UI kit out there. Multiple functionalities and controls added,  extended color palette and beautiful typography, designed as its own extended version of Bootstrap at  the highest level of quality.                             ">
  <meta name="author" content="Webpixels">
  <title>评测系统</title>
  <!-- Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800|Roboto:400,500,700" rel="stylesheet">
  <!-- Theme CSS -->
  <link type="text/css" th:href="@{/css/theme.css}" rel="stylesheet">
  <link type="text/css" th:href="@{/scss/manage-group.css}" rel="stylesheet">
</head>
<body>
<div th:replace="~{common/header :: header}"></div>
<main class="main">
  <section class="spotlight parallax bg-cover bg-size--cover" data-spotlight="fullscreen">
    <div class="spotlight-holder py-lg pt-lg-xl">
      <div class="container d-flex no-padding">
        <div class="col" style="overflow-x: scroll">
          <table border="1" bordercolor="#ccc" class="table table-hover align-items-center" style="min-width: 700px;">
            <thead class="thead-light">
            <tr>
              <th scope="col">组号</th>
              <th scope="col">组名</th>
              <th scope="col">学号</th>
              <th scope="col">姓名</th>
              <th scope="col">学生操作</th>
              <th scope="col">组操作</th>
            </tr>
            </thead>
            <tbody>
            <div th:each="groupStu, status : ${groupStuList}">
              <tr>
                <td th:text="${groupStu.esGroupNum}" th:rowspan="${#lists.size(groupStu.students)}"></td>
                <td th:text="${groupStu.esGroupName}" th:rowspan="${#lists.size(groupStu.students)}"></td>
                <td th:text="${#lists.size(groupStu.students) > 0 ? groupStu.students[0].esStudentSno : ''}"></td>
                <td th:text="${#lists.size(groupStu.students) > 0 ? groupStu.students[0].esStudentName : ''}"></td>
                <td>
                  <button style="margin: 10px" th:if="${#lists.size(groupStu.students) > 0}" th:data-groupId="${groupStu.esGroupId}" th:data-studentId="${groupStu.students[0].esStudentId}" type="button" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#removeGroupStuModal" onclick="openRemoveStudent(this)">移除</button>
                </td>
                <td th:rowspan="${#lists.size(groupStu.students)}">
                  <button style="margin: 10px" th:data-groupId="${groupStu.esGroupId}" type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#bindStuModal" onclick="openBindStu(this)">添加学生</button>
                  <button style="margin: 10px" th:data-groupId="${groupStu.esGroupId}" type="button" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#deleteGroupModal" onclick="openDeleteGroup(this)">删除</button>
                </td>
              </tr>
              <tr th:if="${status1.index != 0}" th:each="stu, status1 : ${groupStu.students}">
                <td th:text="${stu.esStudentSno}"></td>
                <td th:text="${stu.esStudentName}"></td>
                <td>
                  <button style="margin: 10px" type="button" class="btn btn-sm btn-danger" th:data-groupId="${groupStu.esGroupId}" th:data-studentId="${stu.esStudentId}" data-toggle="modal" data-target="#removeGroupStuModal" onclick="openRemoveStudent(this)">移除</button>
                </td>
              </tr>
            </div>
            </tbody>
          </table>
        </div>
      </div>
      <!-- 模态框 -->
      <div class="modal fade modal-dialog-scrollable" id="removeGroupStuModal" tabindex="-1" aria-labelledby="showModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="showModalLabel">移除学生</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <form id="removeGroupStuForm" method="post" th:action="${#servletContext.contextPath + '/manageGroup/removeStu'}">
                <input type="text" th:value="${#request.getParameter('classId')}" name="classId" hidden="hidden">
                <input type="text" id="removeGroupStuGroupId" name="groupId" hidden="hidden">
                <input type="text" id="removeGroupStuStuId" name="studentId" hidden="hidden">
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
              <button type="button" class="btn btn-primary" onclick="submitRemoveStudentForm()">移除</button>
            </div>
          </div>
        </div>
      </div>
      <div class="modal fade modal-dialog-scrollable" id="deleteGroupModal" tabindex="-1" aria-labelledby="showModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="deleteGroupModalLabel">删除分组</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <form id="deleteGroupForm" method="post" th:action="${#servletContext.contextPath + '/manageGroup/delete'}">
                <input type="text" th:value="${#request.getParameter('classId')}" name="classId" hidden="hidden">
                <input type="text" id="deleteGroupGroupId" name="groupId" hidden="hidden">
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
              <button type="button" class="btn btn-primary" onclick="submitDeleteGroupForm()">删除</button>
            </div>
          </div>
        </div>
      </div>
      <div class="modal fade modal-dialog-scrollable" id="bindStuModal" tabindex="-1" aria-labelledby="showModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="bindStuModalLabel">删除分组</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <form id="bindStuForm" method="post" th:action="${#servletContext.contextPath + '/manageGroup/bind'}">
                <input type="text" th:value="${#request.getParameter('classId')}" name="classId" hidden="hidden">
                <input type="text" id="bindStuGroupId" name="groupId" hidden="hidden">
                <div th:each="stu, status : ${students}">
                  <input name="studentIds" class="form-check-input" type="checkbox" th:value="${stu.esStudentId}" th:id="'stu-check-' + ${stu.esStudentId}">
                  <label class="form-check-label" th:for="'stu-check-' + ${stu.esStudentId}" th:text="${stu.esStudentName}"></label>
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
              <button type="button" class="btn btn-primary" onclick="submitAddGroupStuForm()">提交</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>
<div th:replace="~{common/footer :: footer}"></div>
</body>
<script>

  function openBindStu(e) {
    var groupIdInput = $("#bindStuGroupId");
    groupIdInput.val(e.getAttribute("data-groupid"));
  }

  function submitAddGroupStuForm() {
    $("#bindStuForm").submit();
    var groupIdInput = $("#bindStuGroupId");
    groupIdInput.val(0);
  }

  function openRemoveStudent(e) {
    var groupIdInput = $("#removeGroupStuGroupId");
    var stuIdInput = $("#removeGroupStuStuId");
    groupIdInput.val(e.getAttribute("data-groupid"));
    stuIdInput.val(e.getAttribute("data-studentid"));
  }

  function submitRemoveStudentForm() {
    $("#removeGroupStuForm").submit();
    var groupIdInput = $("#removeGroupStuGroupId");
    var stuIdInput = $("#removeGroupStuStuId");
    groupIdInput.val(0);
    stuIdInput.val(0);
  }

  function openDeleteGroup(e) {
    var groupIdInput = $("#deleteGroupGroupId");
    groupIdInput.val(e.getAttribute("data-groupid"));
  }

  function submitDeleteGroupForm() {
    $("#deleteGroupForm").submit();
    var groupIdInput = $("#deleteGroupGroupId");
    groupIdInput.val(0);
  }
</script>
</html>
